﻿@page "/docs/extensions/selectlist"

<Seo Canonical="/docs/extensions/selectlist" Title="Blazorise SelectList" Description="Learn to use and work with the Blazorise SelectList component, which allows you to select a value from a list of predefined items." />

<DocsPageTitle Path="Extensions/SelectList">
    Blazorise SelectList component
</DocsPageTitle>

<DocsPageLead>
    The <Code>SelectList</Code> component allows you to select a value from a list of predefined items.
</DocsPageLead>

<DocsPageParagraph>
    To be able to use <Code>SelectList</Code> component you first need to install it.
</DocsPageParagraph>

<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<Alert Color="Color.Info" Visible>
    <AlertDescription>
        The SelectList extension is part of the <Code>Blazorise.Components</Code> NuGet package.
    </AlertDescription>
</Alert>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="ComponentsNugetInstallExample"></DocsPageSectionSource>
</DocsPageSection>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic Example">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <SelectListExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SelectListExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="With Multiple Selections">
        Just like with a regular <Code Tag>Select</Code> component, add the <Code>Multiple</Code> parameter to allow more than one option to be selected. Also, bind the <Code>SelectedValues</Code> parameter.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <SelectListMultipleExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="SelectListMultipleExample" />
</DocsPageSection>

<DocsPageSubtitle>
    API
</DocsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Attributes
</Heading>

<DocsAttributes>
    <DocsAttributesItem Name="TItem" Type="generic">
        Model data type.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TValue" Type="generic">
        Bound value data type.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Data" Type="IEnumerable<TItem>">
        Data used for the search.
    </DocsAttributesItem>
    <DocsAttributesItem Name="TextField" Type="Func<TItem, string>">
        Selector for the display name field.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ValueField" Type="Func<TItem, TValue>">
        Selector for the value field.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ItemDisabled" Type="Func<TItem, bool>">
        Selector for disabling list items.
    </DocsAttributesItem>
    <DocsAttributesItem Name="SelectedValue" Type="TValue">
        Currently selected value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="SelectedValues" Type="IReadOnlyList<TValue>" Default="default">
        Selected item value when in multi edit mode.
    </DocsAttributesItem>
    <DocsAttributesItem Name="SelectedValueChanged" Type="EventCallback<TValue>">
        Raises an event after the selected value has changed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="SelectedValuesChanged" Type="EventCallback<IReadOnlyList<TValue>>">
        Occurs when the selected items value has changed (only when <Code>Multiple</Code>).
    </DocsAttributesItem>
    <DocsAttributesItem Name="Multiple" Type="bool" Default="false">
        Specifies that multiple items can be selected.
    </DocsAttributesItem>
    <DocsAttributesItem Name="MaxVisibleItems" Type="int?" Default="null">
        Specifies how many options should be shown at once.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DefaultItemText" Type="string" Default="null">
        Display text of the default select item.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DefaultItemValue" Type="TValue" Default="default">
        Value of the default select item.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DefaultItemDisabled" Type="bool" Default="false">
        If true, hides the default item.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DefaultItemHidden" Type="bool" Default="false">
        If true, hides the default item.
    </DocsAttributesItem>
</DocsAttributes>
